<template>
    <div class="comment">
        <el-divider></el-divider>
        <div class="commentBox">
            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="善语结善缘，恶语伤人心"
                v-model="content"></el-input>
            <div class="btn">
                <el-button plain type="primary" @click="submit">发布</el-button>
            </div>
        </div>
        <div class="titleAll">
            <span v-if="commentList.length === 0">暂无评论</span>
            <span v-else>全部评论</span>
        </div>
        <ul class="comments">
            <li v-for="item in commentList" :key="item.id">
                <div class="info">
                    <div class="nickname">
                        <i class="el-icon-user"></i>
                        {{ item.nickname }}
                    </div>
                    <div class="time">{{moment(item.create_time).fromNow()}}</div>
                </div>
                <div class="content">
                    {{ item.content }}
                    <el-button v-if="User.userinfo.id === item.user_id" type="primary" link
                        @click="deleteHandler(item.id)">删除</el-button>
                </div>
            </li>
        </ul>
    </div>
</template>
  
<script setup>
import { ref, watch, onMounted } from 'vue';
import moment from 'moment';
import { getComment, insertComment, deleteComment,getMallComment} from '@/api/comment';
import { useUserStore } from '@/stores/useUser';
import { ElMessage } from 'element-plus';

const props = defineProps(['id']);

const content = ref('');
const commentList = ref([]);
const User = useUserStore();

const getAllComment = () => {
    console.log(props.id);
    getComment(props.id).then(res => {
        if (res.data.status === 200) {
            commentList.value = res.data.comments;
            console.log(commentList.value);
        }
    });
};

const submit = () => {
    if (content.value === '') {
        ElMessage.error('内容不能为空');
        return;
    }
    if (!User.isLogin) {
        ElMessage.error('请先登录');
    } else {
        insertComment({
            user_id: User.userinfo.id,
            content: content.value,
            id: props.id,
            nickname: User.userinfo.nickname,
            create_time: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        }).then(res => {
            if (res.data.code === 200) {
                ElMessage.success(res.data.message);
                content.value = '';
                getAllComment();
            } else {
                ElMessage.error(res.data.message);
            }
        });
    }
};

const deleteHandler = (id) => {
    deleteComment({ id: id }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success(res.data.message);
            getAllComment();
        } else {
            ElMessage.error(res.data.message);
        }
    });
};

watch(() => props.bookId, (newVal, oldVal) => {
    getAllComment();
});

onMounted(() => {
    getAllComment();
});

</script>
  
<style scoped lang='less'>
.comment {
    width: 100%;

    .commentBox {
        .btn {
            margin-top: 10px;
            text-align: end;
        }
    }

    .titleAll {
        font-weight: bold;
        color: #666;
        margin-top: 20px;
    }

    .comments {
        width: 100%;

        li {
            width: 100%;
            padding: 20px 0;
            border-bottom: 1px solid #e6e6e6;

            .info {
                padding: 10px 0;
                width: 100%;
                display: flex;
                justify-content: space-between;

                .nickname {
                    color: #555;
                    cursor: pointer;
                }

                .time {
                    color: #666;
                    font-size: 14px;
                }
            }

            .content {
                padding: 15px;
                background-color: #f8f8f8;
                border-radius: 5px;
            }
        }
    }
}
</style>
  